 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>line</title>
 	<style type="text/css">
		#canvas{
			margin: 0 auto;
			display: block;
			border: 1px solid #aaa;
		}
 	</style>
 </head>
 <body>
 	<canvas id="canvas">请升级浏览器</canvas>

 	<script type="text/javascript">
	 	var canvas = document.getElementById('canvas');
	 	canvas.width = 800;
	 	canvas.height = 600;

	 	context = canvas.getContext('2d');
	 	context.lineWidth = 10;

	 	context.beginPath();
	 	context.lineTo(100, 250);
	 	context.lineTo(400, 250);
	 	context.lineTo(400, 50);
	 	context.lineTo(650, 300);
	 	context.lineTo(400, 550);
	 	context.lineTo(400, 350);
	 	context.lineTo(100, 350);
	 	context.closePath();

	 	context.fillStyle = 'red';
	 	context.fill();
	 	
	 	context.strokeStyle = 'blue';
	 	context.stroke();

	 	
 	</script>
 </body>
 </html>